<template>
  <div>
    <div class="middle">
      <div class="center-box">
        <div class="reg-box">
          <div class="reg-title">
            <h2>用户注册</h2>
          </div>
          <div class="reg-user">
            <ul class="reg-input">
              <li>
                <input
                  type="text"
                  placeholder="请输入手机号码"
                  name="phone"
                  class="myinput"
                  v-model="phone"
                  @blur="checkName"
                />
              </li>
              <li>
                <input
                  type="password"
                  placeholder="密码：请输入8~20字符，需同时包含英文和数字"
                  name="upwd"
                  class="myinput"
                  v-model="upwd"
                  @blur="checkPwd"
                />
              </li>
              <li>
                <input
                  type="password"
                  placeholder="确认密码"
                  name="upwd2"
                  class="myinput"
                  v-model="upwd2"
                  @blur="checkPwd2"
                />
              </li>
              <li class="input-yard">
                <input type="text" placeholder="请输入验证码" />
                <button>获取验证码</button>
              </li>
              <li>
                <el-date-picker
                  class="input-day"
                  v-model="brithday"
                  type="date"
                  placeholder="请选择生日"
                >
                </el-date-picker>
              </li>
              <li><span style="color: #f00" id="msg"></span></li>
              <li>
                <button class="zhuce" @click="register">注册</button>
              </li>
              <li class="input-text"></li>
            </ul>
            <div class="reg-text">
              <input type="checkbox" />
              <div>
                <span>已阅读并同意</span>
                <span>
                  <router-link to="/protocol">21客会员协议</router-link> 和
                  <router-link to="/privacy">隐私保护政策</router-link>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue";
import MyFooter from "@/components/MyFooter.vue";
export default {
  components: { MyHeader, MyFooter },
  data() {
    return {
      phone: "",
      upwd: "",
      upwd2: "",
      brithday: "",
    };
  },
  methods: {
    register() {
      if (this.checkName && this.checkPwd && this.checkPwd2) {
         console.log('验证成功，执行注册业务...') 
        const url = "http://127.0.0.1:3000/cake/user/register";
        let params = `phone=${this.phone}&upwd=${this.upwd}`;
        console.log(params);
        this.axios.post(url, params).then((res) => {
          console.log(res);
          // 如果成功, 就提示 然后 自动跳转到登录页
          if (res.data.code == 201) {
             msg.innerHTML = '请重新输入手机号'
           
          } else{
             alert("恭喜! 注册成功. 即将跳转到登录页");
            this.$router.push("/login");
          }
        });
      }else{
        msg.innerHTML = '请输入您的账号'
      }
    },
    checkPwd2() {
      // 验证确认密码
      if (this.upwd == this.upwd2) {
        msg.innerHTML = "确认密码正确";
      } else if (this.upwd2 == "") {
        msg.innerHTML = "确认密码不能为空";
      } else {
        msg.innerHTML = "请重新输入确认密码";
      }
    },

    checkPwd() {
      // 验证密码
      let exp = /^[a-zA-Z]\w{5,17}$/;
      if (exp.test(this.upwd)) {
        msg.innerHTML = "密码格式正确";
      } else if (this.upwd == "") {
        msg.innerHTML = "密码不能为空";
      } else {
        msg.innerHTML = "密码格式不正确";
      }
    },

    //手机号码验证
    checkName() {
      // 验证手机号码
      let exp = /^1[3-9]\d{9}$/;
      if (exp.test(this.phone)) {
        // 验证通过
        msg.innerHTML = "手机号码格式正确";
      } else if (this.phone == "") {
        msg.innerHTML = "手机号码不能为空";
      } else {
        msg.innerHTML = "手机号码格式不正确";
      }
    },
  },
};
</script>
<style scoped src="../assets/css/register.css">
</style>
<style lang="scss" scoped>
</style>